<template>
	<view class="conversation">
		<!-- 聊天内容列表 -->
		<view class="message-list">
			<template v-for="(item, index) in messageList">
				<view :key="item.ID" class="message-item" :class="{ reverse: index > 1  }">
					<u-avatar
						src=""
						size="80rpx"
						default-url="/static/common/avatar.png"
					></u-avatar>
					<view class="item-right">
						<view class="name" v-if="index <= 1">患者</view>
						<view class="time">2022-03-02 12:22:22</view>
						<!-- 带边距的内容 -->
						<view class="content">
							<!-- 文本内容 -->
							<text class="text">
								哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
							</text>
							<!-- 描述症状内容 -->
							<!-- <view class="miaoshu-zhengzhuang">
								<view class="miaoshu-item">病情描述：哈哈哈</view>
								<view class="miaoshu-item">
									患病时长（天）：哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
								</view>
								<view class="miaoshu-item">医院检查：哈哈哈</view>
								<view class="miaoshu-item">用药情况：哈哈哈</view>
								<view class="miaoshu-img">
									<image
									@click="handlePreviewImage"
										class="img"
										:key="index"
										v-for="(item, index) in 3"
										src="/static/1.png"
										mode="aspectFill"
									></image>
								</view>
							</view> -->
							<!-- 病历报告已生成 -->
							<!-- <view class="case-report" @click="goCaseReport">病历报告已生成</view> -->
						</view>
						<!-- 图片内容 -->
						<!-- <image
						@click="handlePreviewImage"
							class="content-image"
							src="/static/1.png"
							mode="aspectFill"
						></image> -->
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
export default {
	name: "conversation",
	props: {
		orderNumber: {
			type: [Number, String],
			default: "",
		},
		messageList: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {};
	},
	methods: {
		// 预览图片
		handlePreviewImage(url) {
			this.$utils.previewImage(url);
		},
		// 查看病历报告
		goCaseReport() {
			uni.navigateTo({
				url:
					"/pages/message/case-report/case-report?orderNumber=" +
					this.orderNumber,
			});
		},
		// 跳转辅料清单
		goMaterialsList() {
			uni.navigateTo({
				url:
					"/pages/message/materials-list/materials-list?orderNumber=" +
					this.orderNumber,
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.conversation {
	width: 100%;
}

.message-list {
	width: 100%;
	padding: 40rpx;
}

.message-item {
	width: 100%;
	display: flex;
	margin-bottom: 40rpx;
	&:last-child {
		margin-bottom: 0;
	}
	.item-right {
		margin-left: 28rpx;
	}
	.name {
		font-size: 28rpx;
		margin-bottom: 8rpx;
	}
	.time {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 20rpx;
	}
	// 带边距的内容
	.content {
		display: inline-block;
		max-width: 448rpx;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		font-size: 0;
		// 文本内容
		.text {
			display: inline-block;
			font-size: 24rpx;
			text-align: justify;
			word-break: break-all;
		}
		// 描述症状内容
		.miaoshu-zhengzhuang {
			width: 100%;
			.miaoshu-item {
				font-size: 24rpx;
			}
			.miaoshu-img {
				width: 100%;
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				font-size: 0;
				.img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					&:nth-child(3n) {
						margin-right: 0;
					}
				}
			}
		}
		// 病历报告已生成
		.case-report {
			font-size: 24rpx;
			color: #3fa3fa;
		}
	}
	.content-image {
		width: 300rpx;
		height: 300rpx;
		border-radius: 16rpx;
	}
	// 反转的样式
	&.reverse {
		flex-direction: row-reverse;
		.item-right {
			margin-left: 0;
			margin-right: 28rpx;
		}
		.name,
		.time {
			text-align: right;
		}
		.content {
			background-color: #e0f0fe;
		}
	}
}
</style>
